<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>按钮的种类</title>
</head>
<body>
    <form action="http://www.baidu.com">
        <!-- id是每个标签的唯一标识 - js来获取的 -->
        <input type="text" name="" id="uname"><br>
        <!-- 1 - 提交按钮 -->
        <input type="submit" value="提交">
        <!-- 2 - 重置按钮 -->
        <input type="reset" value="重置">
        <!-- 3 - 普通按钮 - 配合js的事件
                 onclick - 点击事件 - 触发一个js函数
        -->
        <input type="button" value="普通按钮" onclick="test()">

        <!-- button标签
             type:submit reset button
        -->
        <button>默认提交</button>
        <button type="submit">提交</button>
        <button type="reset">重置</button>
        <button type="button" onclick="test()">普通按钮</button><br>

        <!-- 图片按钮 - 具备提交功能 -->
        <input type="image" src="../img/yy.jpg" alt="">
    </form>

    <script>
        //定义函数
        function test(){
            //函数体
            alert("我是好人!");//弹出框

            //根据id来获取标签对象
            //js弱类型的
            //var unameInput = document.getElementById("uname");
            //对象访问属性
            //alert(unameInput.value);//获取文本框中的value - 输入的数据

            //学习技术 - 正则
            // for(var i = 0;i < 10;i++){
            //     //控制台输出
            //     console.log(i);
            // }

        }
    
    </script>

</body>
</html>